<template>
  <div class="login-container">
    <div class="index-main">
      <el-button style="float: right;z-index:99;position: relative;margin-right: 3px" type="primary" plain
                 @click="exportExcel">
        导出汇总
      </el-button>
      <el-button style="float: right;z-index:99;position: relative;margin-right: 3px" type="primary" plain
                 @click="exportExcel2">
        导出明细
      </el-button>
      <el-button style="float: right;z-index:99;position: relative;margin-right: 3px" type="primary" plain
                 @click="dialogFormPeopleVisible = true">
        添加人员
      </el-button>
      <el-button style="float: right;z-index:99;position: relative;margin-right: 3px" type="primary" plain
                 @click="dialogFormRankVisible = true">
        添加评分
      </el-button>
      <el-tabs v-model="activeName" type="card" @tab-click="handleRankClick">
        <el-tab-pane label="汇总" name="first">
          <div class="main-table">
            <el-table
              :data="tableData2"
              height="600px"
              border
              style="width: 100%">
              <el-table-column
                label="排名"
                sortable
                prop="id"
                width="80px">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                sortable>
              </el-table-column>
              <el-table-column
                prop="know"
                label="知识"
                sortable>
              </el-table-column>
              <el-table-column
                prop="power"
                sortable
                label="能力">
              </el-table-column>
              <el-table-column
                prop="performance"
                sortable
                label="工作业绩">
              </el-table-column>
              <el-table-column
                prop="composite"
                sortable
                label="综合表现">
              </el-table-column>
              <el-table-column
                prop="total"
                sortable
                label="合计分数">
              </el-table-column>
              <el-table-column
                prop="agree"
                sortable
                label="同意人数">
              </el-table-column>
              <el-table-column
                prop="disagree"
                sortable
                label="不同意人数">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <!--        评分明细 -------------------------------------------------------------------------------------------------------------------------- -->
        <el-tab-pane label="评分明细" name="second">
          <div class="main-table">
            <el-table
              :data="tableData"
              height="600px"
              border
              style="width: 100%">
              <el-table-column
                type="index">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop="know"
                label="知识"
                sortable
              >
              </el-table-column>
              <el-table-column
                prop="power"
                sortable
                label="能力">
              </el-table-column>
              <el-table-column
                prop="performance"
                sortable
                label="工作业绩">
              </el-table-column>
              <el-table-column
                prop="composite"
                sortable
                label="综合表现">
              </el-table-column>
              <el-table-column
                prop="remark"
                sortable
                width="220px"
                label="是否同意">
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="removeDataById(scope.row.id)"
                    type="danger"
                    size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>

            </el-table>
          </div>
        </el-tab-pane>
        <!--        人员 -------------------------------------------------------------------------------------------------------------------------- -->
        <el-tab-pane label="人员" name="third">
          <div class="main-table">
            <el-table
              :data="peopleData"
              height="600px"
              border
              style="width: 100%">
              <el-table-column
                type="index">
              </el-table-column>
              <el-table-column
                prop="label"
                label="姓名"
                sortable
              >
              </el-table-column>
              <el-table-column
                label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="removePeopleById(scope.row.id)"
                    type="danger"
                    size="small">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--        添加表单 ---------------------------------------------------------------------------------------------- -->
      <!-- Form -->
      <el-dialog title="添加评分" :visible.sync="dialogFormRankVisible">
        <el-form :model="formform">
          <el-form-item label="姓名" label-width="80px">
            <el-select v-model="form.name" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="知识" prop="know" label-width="80px"
                        :rules="[{ type: 'number', message: '必须为数字值'}]">
            <el-input v-model.number="form.know"></el-input>
          </el-form-item>
          <el-form-item label="能力" prop="power" label-width="80px"
                        :rules="[{ type: 'number', message: '必须为数字值'}]">
            <el-input v-model.number="form.power" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="工作业绩" prop="performance" label-width="80px"
                        :rules="[{ type: 'number', message: '必须为数字值'}]">
            <el-input v-model.number="form.performance" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="综合表现" prop="composite" label-width="80px"
                        :rules="[{ type: 'number', message: '必须为数字值'}]">
            <el-input v-model.number="form.composite" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否同意">
            <el-select v-model="form.remark" placeholder="请选择">
              <el-option label="同意" value="同意"></el-option>
              <el-option label="不同意" value="不同意"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormRankVisible = false">取 消</el-button>
          <el-button type="primary" @click="addButton">确 定</el-button>
        </div>
      </el-dialog>
      <!--        添加人员 ---------------------------------------------------------------------------------------------- -->
      <el-dialog title="添加人员" :visible.sync="dialogFormPeopleVisible">
        <el-form :model="peopleForm">
          <el-form-item label="姓名" label-width="80px">
            <el-input v-model="peopleForm.value"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormPeopleVisible = false">取 消</el-button>
          <el-button type="primary" @click="addPeopleButton">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getDetailList, saveData, removeById, getList, savepeopleData, getPeopleList, removePeopleById } from '@/api/home'
import {export2Excel} from "@/common/js/util";

export default {
  data() {
    return {
      radio:'1',
      tableData: [],
      tableData2: [],
      activeName: 'first',
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 1000, // 每页记录数,
      dialogFormRankVisible: false,
      dialogFormPeopleVisible: false,
      form: {},
      peopleForm: {},
      peopleData: [],
      options: [],
      name: '这是导出的Excel',
      columns: [//定义表头
        {title: '排名', key: 'id'},
        {title: '姓名', key: 'name'},
        {title: '知识', key: 'know'},
        {title: '能力', key: 'power'},
        {title: '工作业绩', key: 'performance'},
        {title: '综合表现', key: 'composite'},
        {title: '合计分数', key: 'total'},
        {title: '同意人数', key: 'agree'},
        {title: '不同意人数', key: 'disagree'}
      ],
      columns2: [//定义表头
        {title: '姓名', key: 'name'},
        {title: '知识', key: 'know'},
        {title: '能力', key: 'power'},
        {title: '工作业绩', key: 'performance'},
        {title: '综合表现', key: 'composite'},
        {title: '是否同意', key: 'remark'}
      ],
    }
  },
  created() {
    this.fetchMyData()
    this.fetchMyData2()
    this.fetchpeopleData()
  },
  methods: {
    exportExcel() {
      // 表头,数据,名字
      export2Excel(this.columns, this.tableData2, "汇总")
    },

    exportExcel2() {
      // 表头,数据,名字
      export2Excel(this.columns2, this.tableData, "评分明细")
    },
    addButton() {
      this.dialogFormRankVisible = false
      saveData(this.form).then(response => {
        this.fetchMyData()
        this.fetchMyData2()
      })
      this.form = {}
    },
    addPeopleButton() {
      this.dialogFormPeopleVisible = false
      savepeopleData({ value: this.peopleForm.value, label: this.peopleForm.value }).then(response => {
        this.fetchpeopleData()
      })
      this.peopleForm = {}
    },
    fetchpeopleData() {
      this.listLoading = true
      getPeopleList().then(response => {
        this.peopleData = response.data
        this.options = response.data
        this.listLoading = false
      })
    },
    fetchMyData() {
      this.listLoading = true
      getDetailList().then(response => {
        this.tableData = response.data
        this.listLoading = false
      })
    },
    fetchMyData2() {
      this.listLoading = true
      getList().then(response => {
        this.tableData2 = response.data
        this.listLoading = false
      })

    },
    //删除
    removePeopleById(id) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用方法删除
        removePeopleById(id)
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            //刷新
            this.fetchpeopleData()
          })
      })
    },
    removeDataById(id) {
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //调用方法删除
        removeById(id)
          .then(response => {
            //提示
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            //刷新
            this.fetchMyData()
          })
      })
    },
    handleRankClick(tab, event) {
      // console.log(tab, event)
    }
  }
}
</script>
<style scoped>
/deep/ span.el-radio__label {
  font-size: 20px;
  color: #ffffff;
}
</style>
<style lang="scss" scoped>
.login-container {
  min-height: 100%;
  width: 100%;
  background-color: #F8F8Fa;
  overflow: hidden;

  .index-main {
    width: 60%;
    height: 100%;
    margin-top: 100px;
    margin-left: 300px;
    //box-sizing: border-box;

  }

}
</style>
